<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><%=@page_title || @test.name%></title>
<link href="/stylesheets/survey_public.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/javascripts/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery/jquery.validate.min.js"></script>
<style type="text/css">
#content{
  width:885px; float:left;
  margin:30px 0 0 50px;
  height:auto !important;
  height:450px;
  min-height:450px;
}
div#form-message{
	margin: 5px;
	padding: 5px;
        width:200px;
}

#footer{ width:100%; height:200px; float:left; background:url(/images/user/report_list/footer.jpg) no-repeat;
             text-align:center; color:#295c72;}
#footer h1{ margin-top:100px;}
#userinfo{margin-left : 20px;margin-right : 10px ;margin-top :10px;}

#user-guide{margin:10px 5px 5px 10px; width:650px;}
#user-guide{padding:5px 5px 5px 5px; width:640px; line-height:20px;}

#part{margin: 15px 0 15px 15px;}
#speed{margin-bottom:15px;}
</style>
<script type="text/javascript">
  $(function(){

    //init...
    $('.question-page').hide();
    $('#speed').hide();
    $('#user-guide').hide();
    $("input:hidden").each(function(){
      $(this).attr('value', 'nil');
    });
    $('#survey_id').attr('value', <%=@test.id%>);

    
    $('#start-test').click(function(){
      //if (validator.form()){
      //}
      if ($.trim($("input[name='age']").attr('value')) == "" || $.trim($("input[name='perfession']").attr('value')) == ""){
        $("#form-message").empty();
        $('#form-message').append("<font color=red>年龄和职业不能为空</font>");
      }else if(!isDigit($.trim($("input[name='age']").attr('value')))){
        $("#form-message").empty();
        $('#form-message').append("<font color=red>年龄必须为数字</font>");
      }else {
        $('#user-guide').show();
        $('#page-0').show();
        $('#userinfo').hide();
        settime();
        DoCallTimer();
        $('#speed').show();
      }
    });

  });

  function next(current_page_id){
    var no_checked_questions = check_no_checked_questions(current_page_id);
    if(no_checked_questions.length == 0){
      if(current_page_id == 0) {

        $('#user-guide').hide();
      }
      $('.question-page').hide();
      $('#page-' + (current_page_id+1) ).show();
    }else{
      var msg = "您还有没有选择以下项目：";
      for(i=0; i<no_checked_questions.length; i++){
        msg += "第" + no_checked_questions[i] +　"题 ";
      }
      var page_size = <%=@test.page_size || "null"%>;
      if(page_size != "null" && page_size == 1) {
        msg = "您还没有选择";
      }
      alert(msg);
    }
  }
  
  function check_no_checked_questions(current_page_id){
    var no_checked_questions = new Array();
    var qs = $('.page-' + current_page_id + '-q-value');
    for(i=0; i<qs.length; i++) {
      if(qs[i].value == 'nil'){
        //s = qs[i].id;
        //s = s.substring(s.indexOf('-') + 1, s.indexOf('-value'))
        no_checked_questions.push(current_page_id*<%=@test.page_size || QUESTION_PAGE_SIZE%> + i+1);
      }
    }
    return no_checked_questions;
  }

  function finish(current_page_id){
    var no_checked_questions = check_no_checked_questions(current_page_id);
    if(no_checked_questions.length == 0){
      $('#speed').hide('fast');
      $('#user-guide').hide('fast');
      $('.question-page').hide('fast');
      document.getElementById('test-form').submit();
    }else{
      var msg = "您还有没有选择：";
      for(i=0; i<no_checked_questions.length; i++){
        msg += "第" + no_checked_questions[i] +　"题 ";
      }
      var page_size = <%=@test.page_size || "null"%>;
      if(page_size != "null" && page_size == 1) {
        msg = "您还没有选择";
      }
      alert(msg);
    }
  }

  function check_choice(q_id, value, c_id, part_id, idx){
    //设置题目分值
    $("#question-" + q_id + "-value").attr("value", value);
    $("#question-" + q_id + "-choice").attr("value", 65+idx);
    $("#question_" + q_id).attr("value", q_id);
    $("#question-" + q_id + "-part").attr("value", part_id);

    //替换选择按钮的图片
    $(".choices-img-" + q_id).attr("src", "/images/user/test/chooseblue.gif");
    $("#img-" + c_id).attr("src", "/images/user/test/chooseblue2.gif");
  }

  var CallTimeLen = "0";
  var timer1 = null;

  function stop(){
   clearTimeout(window.timer1);
  }
  function settime(){
    var now= new Date();
    var month=now.getMonth()+1;
    var day=now.getDate();
    var hour=now.getHours();
    var minute=now.getMinutes();
    var second=now.getSeconds();
    if (minute<10){
    minute="0"+minute;
    }
    document.getElementById("start_time").innerHTML = month+"月"+day+"日 "+hour+":"+minute+":"+second
  }

  function DoCallTimer(){
    var minute="0";
    var second="0";
    CallTimeLen = parseInt(CallTimeLen)+1;
    hour=parseInt(CallTimeLen/3600)
    minute = parseInt((CallTimeLen-(hour*3600))/60);
    second = CallTimeLen%60;
    if(minute=="0" &&hour=="0")
    {
     document.getElementById("timer").innerHTML ="00:00:"+second;
    }
    else if (hour=='0')
    {
     document.getElementById("timer").innerHTML="00:"+minute+":"+second;
    }else
    {
    document.getElementById("timer").innerHTML =hour+":"+minute+":"+second;
    }
    timer1 = window.setTimeout("DoCallTimer()",1000);
  }

  function isDigit(s) {
    var patrn=/^[0-9]{1,20}$/;
    if (!patrn.exec(s)) return false
    return true
  }
</script>
</head>

<body>
  <div id="page">

    <div id="header">
      <ol>
        <li id="title-text"><%= @test.name%> </li>
      </ol>
      <ul>
        <li id="org-text"> <%=current_user.name%></li>
        <li style="margin:0 20px 0 0;"><a href="/login/logout">安全退出</a></li>
      </ul>
    </div>

<% form_for(:test, :url => { :action => "prof_result" }, :html => {:name=>'test-form', :id=>'test-form'}) do %>
<%= tag(:input, :type => "hidden", :name => request_forgery_protection_token.to_s,
                                 :value => form_authenticity_token) %>
  <%= hidden_field_tag "survey_id", @test.id %>
    <div id="content">
      <div id="speed" style="display:none">
          开始时间:<font color="red" id="start_time"></font>&nbsp;&nbsp;&nbsp;
          已用时:&nbsp;<font color="red" id="timer"></font>
      </div>

      <div id="userinfo">

        <!-- error message container -->
        <div id="form-message"></div>
        <div><p style="color: red"><%= flash[:agenotice] %></p></div>

        <table>
          <tbody>
            <tr>
              <td height="30px" width="80px">姓名：</td>
              <td><input type="text" id="username"name="username"
                size="15" value=""  style="height:18px; border:1px solid #a5acb2;"/>(不填为匿名)
              </td>
            </tr>
            <tr>
              <td height="30px">年龄：</td>
              <td>
                <input type="text"id="age" name="age"
                  class="{validate:{required:true,number:true, rangelength:[1,150]}}" value="" size="6"
                  style="height:18px; border:1px solid #a5acb2;"/>
              </td>
            </tr>
            <tr>
              <td height="30px">性别：</td>
              <td>
                <span style="border:1px solid #a5acb2; height:20px;position:absolute; overflow:hidden;float:left; margin-top:-14px">
                  <select name="gender" id="gender" class="" style="margin:-1px;">
                     <option value="男">男&nbsp;&nbsp;&nbsp;  </option>
                     <option value="女">女&nbsp;&nbsp;&nbsp;  </option>
                  </select>
                </span>
              </td>
            </tr>
            <tr>
              <td height="30px">职业：</td>
              <td>
                <input type="text" id="perfession" class="{validate:{required:true}}"
                  name="perfession" size="15" value="" style="height:18px; border:1px solid #a5acb2; margin-top:4px"/><br/><br />
              </td>
            </tr>
            <tr>
              <td height="30px">教育程度：</td>
              <td>
                <span style="border:1px solid #a5acb2; height:20px;position:absolute; overflow:hidden;float:left; margin-top:-13px ">
                   <select name="edu_status" id="edu_status"   class="" style="margin:-1px;">
                       <option value="硕士">硕士</option>
                       <option value="本科">本科</option>
                       <option value="专科">专科</option>
                       <option value="大专">大专</option>
                       <option value="高中">高中</option>
                       <option value="高中以下">高中以下</option>
                   </select>
                </span>
              </td>
            </tr>
            <tr>
              <td colspan="2" height="80px">
                <a id="start-test" href="javascript:;" style="margin-left:30px;">
                  <img src="/images/user/prof_survey/begin.jpg" width="116" height="23" alt="开始测试" />
                </a>
              </td>
            </tr>
          </tbody>
        </table>

      </div>
      
      <div id="user-guide" style="display:none">
        <b>指导语：</b>
        <p style="text-height:22px;">
          <%=@test.user_guide%>
        </p>
      </div>
        <% count = 0 %>
        <% @pages.each_with_index do |page, index| %>
      <div id="page-<%=index%>" class="question-page" style="display:none">
          <% question_num = 0 %>
          <% page.each_with_index do |item, i|  %>
            <% if item[:type] == "question" %>
              <% question_num += 1 %>
              <% count += 1 %>
              <% q = item[:item] %>
        <input type="hidden" id="question-<%=q.id%>-value" name="question-<%=q.id%>-value" class="page-<%=index%>-q-value" value="nil" />
        <input type="hidden" id="question-<%=q.id%>-choice" name="question-<%=q.id%>-choice" />
        <input type="hidden" id="question_<%=q.id%>" name="question_id[]"/>
        <input type="hidden" id="question-<%=q.id%>-part" name="question-<%=q.id%>-part" value="<%=q.part_id%>"/>
        <div id="question-<%=q.id%>" class="question">
          <table width="90%" border="0" cellpadding="13" cellspacing="0">
            <tbody>
              <tr>
                <td class="cs_title_1211" align="left">
                  <a name="position_6287"><%= count unless @test.page_size == 1 %> .<%= q.description %></a>
                </td>
              </tr>
              <tr>
                <td align="center">

                  <table width="96%" border="0" cellpadding="13" cellspacing="0">
                    <tbody>
                      <tr><td height="10px"></td></tr>
                      
                        <% q.choices.each_with_index do |c, idx| %>
                          <% letter = (65 + idx).chr %>
                      <tr style="cursor: pointer;height:32px;" onmousemove="this.bgColor='#F4F4F4'" onmouseout="this.bgColor=''" bgcolor="">
                        
                        <td class="" onclick="check_choice(<%=q.id%>,<%=c.value%>, <%=c.id%>, <%= q.part_id%>, <%=idx%>);" width="50">
                          <!--
                          <input id="answervalue_<%=c.id%>" name="itemanswers_<%= q.id%>" value="<%=c.value%>" type="hidden" />
                          -->
                          <img src="/images/user/test/chooseblue.gif" id="img-<%=c.id %>" class="choices-img-<%=q.id%>" alt="" />
                        </td>
                        <td width="18px" onclick="check_choice(<%=q.id%>,<%=c.value%>, <%=c.id%>, <%= q.part_id%>, <%=idx%>);"><%= letter %>.</td>
                        <td class="" align="left" onclick="check_choice(<%=q.id%>,<%=c.value%>, <%=c.id%>, <%= q.part_id%>, <%=idx%>);">
                          <%= c.content %>
                        </td>
                      </tr>
                        <% end %>

                      <tr><td height="10px"></td></tr>
                    </tbody>
                  </table>
                  
                </td>
              </tr>
            </tbody>
          </table>
        </div>

            <% else %>
        <div id="part">
              <% part = item[:item] %>
              <b><%= part.name %></b>
        </div>
            <% end %>
        
          <% end %>
        
          <% if index == @pages.length - 1 %>
        <a id="finish" onclick="finish(<%=index%>);" href="#">
          <img src="/images/user/prof_survey/finish.jpg" width="86" height="23" alt="完成" />
        </a>
          <% else %>
        <a id="next" onclick="next(<%=index%>);" href="#">
          <img src="/images/user/prof_survey/next.jpg" width="88" height="23" alt="下一步" />
        </a>
          <% end %>
      </div>
      <% end %>
    </div>

<% end %><!--form结束-->
  </div>

  <div id="footer">
    <h1>北京心嘉源咨询有限公司 CopyRight © www.iyaoi.cn 2009</h1>
  </div>

</body>
</html>
